<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        ul{
            width: 200px;
            list-style: none;
            margin:50px auto;
        }
        li{
            width: 200px;
            text-align: center;
            border: 1px dashed pink;
        }
    </style>
</head>
<body>
    <!-- 利用事件委托的方法，给一个无序列表的列表项
        添加点击更改背景色事件。简单说明思路。 -->
        
    <ul id="box">
        <li>可乐</li>
        <li>雪碧</li>
        <li>橙汁</li>
        <li>奶茶</li>
        <li>咖啡</li>
    </ul>
    <script src="js/common.js"></script>
    <script>
    // 获取元素
       var box = my$("box"); 
       var lis = box.children;
    // 利用 事件流的事件冒泡功能将点击事件添加给(委托给)父级
    // 给父级添加点击事件，点击自己时（没有自己点击的函数事件,所以先向上冒泡，因此就会让父级的函数执行)
    // 父级函数执行:其他元素背景颜色为默认，触发的事件源的背景颜色变为函数里设置的颜色
    
    // 排他保留自己
        box.onclick = function(e){
            // 兼容写法
            e = e || window.Event;
        // 排他思想
        for(var i = 0;i<lis.length;i++){
            lis[i].style.backgroundColor = "";
        }
        // e.target 属性记录的就是真正触发事件的事件源
        e.target.style.backgroundColor="skyblue";
    }  
    </script>
    


</body>
</html>